import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { useObserverHook } from '../hooks';

let observer; // 默认这个方式 是 undefined
export default function (props) {
  const [state, setState] = useState();

  useObserverHook('#loading', (entries) => {
    console.log('***', entries);
  });

  //   useEffect(() => {
  //       console.log("进入 页面 +++ ")
  //     observer = new IntersectionObserver(entries => {
  //         console.log("---", entries)
  //     })
  //     observer.observe( document.querySelector("#loading") )

  //     return () => {
  //         console.log("离开 ---- ")
  //         if(observer) {  // 如果  observer  存在
  //             // 解绑元素
  //             observer.unobserve(document.querySelector("#loading"))

  //             // 停止监听
  //             observer.disconnect()
  //         }
  //     }
  //   }, [])

  const handleClick = () => {
    history.push('/');
  };

  return (
    <div>
      observer
      <button onClick={handleClick}> 首页 </button>
      <div
        id="loading"
        style={{
          width: '100px',
          height: '100px',
          background: '#f60',
          marginTop: '1000px',
        }}
      ></div>
    </div>
  );
}
